<template>
  <div class="safety">
    <van-nav-bar
      title="安全中心"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <Bg>
      <div class="set-box">
        <div @click="changePassword">
          <span>修改密码</span>
          <van-icon name="arrow" size="16px" />
        </div>
        <div @click="unsubscribe">
          <span>注销帐号</span>
          <van-icon name="arrow" size="16px" />
        </div>
      </div>
    </Bg>
    <div class="quitBox">
      <van-button type="default" round block @click="quit" color="#7F2F21"
        >退出登录</van-button
      >
    </div>
    <van-popup v-model="showPasswordbox" position="bottom" closeable>
      <div class="change-box">
        <div class="text">修改密码</div>
        <div class="change-password">
          <van-field
            v-model="oldpassword"
            :type="isTextOld ? 'text' : 'password'"
            label="旧密码"
            placeholder="请输入密码 (5到13位)"
            :right-icon="isTextOld ? 'eye-o' : 'closed-eye'"
            @click-right-icon="triggerTypeOld"
          />
          <van-field
            v-model="newpassword"
            :type="isTextNew ? 'text' : 'password'"
            label="新密码"
            placeholder="请输入密码 (5到13位)"
            :right-icon="isTextNew ? 'eye-o' : 'closed-eye'"
            @click-right-icon="triggerTypeNew"
          />
          <div class="btns">
            <van-button
              type="default"
              round
              block
              @click="savechange"
              color="#7F2F21"
              >确&nbsp;定</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import "../assets/less/safety.less";
import { utils } from "../assets/js/utils.js";
import Bg from "../components/Bg.vue";
export default {
  name: "Safety",
  data() {
    return {
      //显示修改密码盒子
      showPasswordbox: false,
      //文本框类型
      isTextOld: false,
      isTextNew: false,
      //旧密码
      oldpassword: "",
      //新密码
      newpassword: "",
    };
  },
  components: {
    Bg,
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },

    // 显示修改密码盒子
    changePassword() {
      this.showPasswordbox = true;
    },

    // 切换文本框
    triggerTypeOld() {
      this.isTextOld = !this.isTextOld;
    },
    triggerTypeNew() {
      this.isTextNew = !this.isTextNew;
    },

    // 修改密码
    savechange() {
      let o = {
        password: {
          value: this.newpassword,
          reg: /^[A-Za-z]\w{5,13}$/,
          errorMsg: "密码支持字母数字_组合,首字母必须是字母",
        },
      };

      //验证
      if (!utils.verifyFrom(o)) {
        return;
      }

      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/updatePassword",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
          password: this.newpassword,
          oldPassword: this.oldpassword,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (result.data.code === "E001") {
            this.$router.push({ name: "Login" });
            this.$toast({
              message: "修改密码成功，请重新登录!",
              forbidClick: true,
              duration: 1000,
            });
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 注销帐号
    unsubscribe() {
      this.$dialog
        .confirm({
          title: "注销帐号",
          message: "是否确定注销帐号，一旦注销将无法恢复",
        })
        .then(() => {
          let tokenString = this.$cookies.get("tokenString");

          //当用户未登录的时候跳转到登录页面
          if (!tokenString) {
            return this.$router.push({ name: "Login" });
          }

          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 0,
          });

          this.axios({
            method: "post",
            url: this.baseUrl + "/destroyAccount",
            data: {
              appkey: this.appkey,
              tokenString: tokenString,
            },
          })
            .then((result) => {
              console.log(result);
              this.$toast.clear();
              if (result.data.code === 700) {
                this.$toast({
                  message: result.data.msg,
                  forbidClick: true,
                  duration: 1000,
                });
                return this.$router.push({ name: "Login" });
              }

              if (result.data.code === "G001") {
                this.$router.push({ name: "Login" });
              }
              this.$toast({
                message: result.data.msg,
                forbidClick: true,
                duration: 1000,
              });
            })
            .catch((err) => {
              this.$toast.clear();
              console.log(err);
            });
        })
        .catch(() => {
          // console.log(2)
        });
    },

    // 退出登录
    quit() {
      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/logout",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (result.data.code === "F001") {
            this.$router.push({ name: "Login" });
          }
          this.$toast({
            message: result.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

  },
};
</script>